<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全屏div</title>
		<style>
			html,body {
				margin: 0;
				height: 100%;
			}

			#test {
				width: 100%;
				height: 100%;
				background-color: #000;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				opacity: 0.3;
				filter: alpha(opacity=30);
				display: none;
			}

			#log_window {
				width: 200px;
				height: 200px;
				background-color: #FF0;
				margin: auto;
				position: absolute;
				z-index: 3;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: none;
			}
		</style>
		<script>
			function shield() {
				var s = document.getElementById("test");
				s.style.display = "block";

				var l = document.getElementById("log_window");
				l.style.display = "block";
			}

			function cancel_shield() {
				var s = document.getElementById("test");
				s.style.display = "none";

				var l = document.getElementById("log_window");
				l.style.display = "none";
			}
		</script>
	</head>

	<body>
		<a href="javascript:shield()">打开遮罩</a>
		<div id="test"></div>
		<div id="log_window">
			<a href="javascript:cancel_shield()">关闭</a>
		</div>
	</body>
</html>
